<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <title></title>
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css">
    <link href="../bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="../toastr/toastr.min.css">
    <link rel="stylesheet" href="../bootstrapvalidator-aae9288/dist/css/bootstrapValidator.css">
    <title>日常消耗</title>
</head>
<body>

<div class="row" id="tableToolBar">
    <button class="btn btn-sm btn-warning" id="addBtn" style="margin-left: 15px"><i class="fa fa-plus"
                                                                                    aria-hidden="true"></i>添加客户
    </button>
    <button class="btn btn-sm btn-danger" id="deleteMoreBtn">批量删除</button>
</div>

<!--删除模态框-->
<div class="modal fade" id="myDeleteModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close"
                        data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    客户信息</h4>
            </div>
            <div class="modal-body" id="deleteDialogMsg">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" id="deleteBtn">
                    删除
                </button>
            </div>
        </div><!-- /.modal-content --></div>
</div>
<!--添加和编辑模态框-->
<div class="modal fade" id="MyModalforAddandEdit" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabelTitle">
                    资产出入库
                </h4>
            </div>
            <div class="modal-body" id="TipForAddandEdit">
                <form id="ForAddandEditForm">
                    <div class="form-group">
                        <label class="col-md-3 control-label hidden">客户编号</label>
                        <div class="col-md-9 hidden">
                            <input type="text" class="form-control" id="consume_id">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="consume_name">物品名称</label>
                        <input type="text" class="form-control" id="consume_name" name="consume_name" placeholder="请输入物品价格">
                    </div>
                    <div class="form-group">
                        <label for="consume_price">物品价格</label>
                        <input type="text" class="form-control" id="consume_price" name="consume_price" placeholder="请输入物品数量">
                    </div>
                    <div class="form-group">
                        <label for="consume_num">物品数量</label>
                        <input type="text" class="form-control" id="consume_num" name="consume_num" placeholder="请输入物品消耗数量">
                    </div>
                    <div class="form-group">
                        <label for="consume_usedperday">物品消耗数量</label>
                        <input type="text" class="form-control" id="consume_usedperday" name="consume_usedperday" placeholder="请输入物品消耗数量">
                    </div>
                    <div class="form-group">
                        <label for="consume_text">备注</label>
                        <input type="text" class="form-control" id="consume_text" name="consume_text" placeholder="请输入物品消耗数量">
                    </div>
                    <div class="text-right">
                        <span id="returnMessage" class="glyphicon"> </span>
                        <button type="button" class="btn btn-default right" data-dismiss="modal">关闭</button>
                        <button id="addorEditBtn" type="button" class="btn btn-primary">办理</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
    <!--boostrop-table的样式表-->
    <table id="data-table"></table>

    <script src="../jquery/jquery-3.4.1.min.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <script src="../bootstrap-table/bootstrap-table.min.js"></script>
    <!--    <script src="../js/j_node2_1.js"></script>-->
    <script src="../toastr/toastr.min.js"></script>
    <script src="../jquery-validation/jquery.validate.js"></script>
    <script src="../jquery-validation/messages_zh.js"></script>
    <script src="../bootstrapvalidator-aae9288/dist/js/bootstrapValidator.js"></script>
    <script src="../bootstrapvalidator-aae9288/dist/js/language/zh_CN.js"></script>
<script>
    var consume_ids=[];
    $(document).ready(function () {
        initTable();
        function initTable() {
            //让bookstraptable销毁
            $("#data-table").bootstrapTable("destroy");
            $("#data-table").bootstrapTable({
                url: "/consumer/selectAllConsume",
                method: 'post', //请求方式（*）
                toolbar: '#addBtn,#deleteMoreBtn',            //工具按钮用哪个容器
                striped: true, //是否显示行间隔色
                cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true, //是否显示分页（*）
                sortable: true, //是否启用排序
                sortOrder: "asc", //排序方式
                sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1, //初始化加载第一页，默认第一页,并记录
                pageSize: 5, //每页的记录行数（*）
                pageList: [10, 20, 50, 100], //可供选择的每页的行数（*）
                search: true, //是否显示表格搜索,模糊查询
                strictSearch: false,//精确查询
                // silent : true,// 刷新事件必须设置
                showColumns: true, //是否显示所有的列（选择显示的列）
                showRefresh: true, //是否显示刷新按钮
                minimumCountColumns: 2, //最少允许的列数
                clickToSelect: true, //是否启用点击选中行
                //height: 1000,                      //表格高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "id", //每一行的唯一标识，一般为主键列
                showToggle: true, //是否显示详细视图和列表视图的切换按钮
                cardView: false, //是否显示详细视图
                detailView: false, //是否显示父子表
                clickToSelect: true,    //是否启用点击选中行
                // queryParams: queryParams,
                columns: [

                    {
                        checkbox: true,

                    },
                    {
                        field: 'consume_id',//JSon数据中的相应的key
                        title: '资产编号',//表头信息
                        sortable: true,

                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        field: 'consume_name',//JSon数据中的相应的key
                        title: '物品名称',//表头信息
                        sortable: true,

                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        field: 'consume_price',
                        title: '物品价格',
                        sortable: true,

                        align: 'center',
                        valign: 'middle',

                    },
                    {
                        field: 'consume_num',
                        title: '物品数量',
                        sortable: true,

                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        field: 'consume_unit',
                        title: '消耗数量',

                        align: 'center',
                        sortable: true,
                        valign: 'middle',
                    },
                    {
                        field: 'consume_usedperday',
                        title: '消耗数量',

                        align: 'center',
                        sortable: true,
                        valign: 'middle',
                    },
                    {
                        field: 'consume_text',
                        title: '消耗数量',

                        align: 'center',
                        sortable: true,
                        valign: 'middle',
                    },
                    {
                        title: '操作',
                        align: 'center',
                        valign: 'middle',
                        events: operateEvents,
                        formatter: function (value, row, index) {
                            return "<button class='btn btn-info updateGuest'><i class='fa fa-pencil-square-o' aria-hidden='true'></i> 编辑</button> <button class='btn btn-danger deleteGuest'> <i class='fa fa-trash' aria-hidden='true'></i> 删除</button>"
                                ;
                        }
                    }
                ],
                onLoadSuccess: function (res) {
                    console.log(res);
                    //复选框的居中样式
                    $(".bs-checkbox").css({"text-align": 'center', "vertical-align": "middle"});
                }, onLoadError: function (statusCode) {
                    return "加载失败了"
                }, formatLoadingMessage: function () {
                    //正在加载
                    return "拼命加载中...";
                }, formatNoMatches: function () {
                    //没有匹配的结果
                    return '无符合条件的记录';
                }
            });
        }

        var form = $('#ForAddandEditForm');
        form.bootstrapValidator({
            message: '输入值不合法',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                consume_name: {
                    message: '物品名不合法',
                    validators: {
                        notEmpty: {
                            message: '物品不能为空'
                        },
                        stringLength: {
                            min: 2,
                            max: 30,
                            message: '请输入2到30个字符'
                        }
                    }
                }
                , consume_price: {
                    validators: {
                        notEmpty: {
                            message: ' 商品价格不能为空'
                        }
                    }
                }, consume_num: {
                    validators: {
                        notEmpty: {
                            message: '商品数量不能为空'
                        },
                    }
                }
            }
        });

        //添加或编辑模态框的确认按钮
        $("#addorEditBtn").click(function () {
            var consume_id=$("#consume_id").val();
            alert(consume_id);
            if(consume_id!=""){
                $.ajax(  {
                    url:"/consumer/updateConsume",
                    datatype:"json",
                    type:"get",
                    data:{
                        consume_id: consume_id,
                        consume_name:$("#consume_name").val(),
                        consume_price:$("#consume_price").val(),
                        consume_num: $("#consume_num").val(),
                        consume_unit: $("#consume_unit").val(),
                        consume_usedperday: $("#consume_usedperday").val(),
                        consume_text: $("#consume_text").val(),
                    },
                    success:function (result) {
                        if(result.errorCode==0){
                            $("#MyModalforAddandEdit").modal("hide");
                            initTable();
                            toastr.success(result.status);
                        }
                    }
                })
            }else{
                $.ajax({
                    url:"/consumer/insertConsume",
                    datatype:"json",
                    type:"post",
                    data:{
                        //guest_id: $("#guest_id").val(),
                        consume_name: $("#consume_name").val(),
                        consume_price: $("#consume_price").val(),
                        consume_num: $("#consume_num").val(),
                        consume_unit: $("#consume_unit").val(),
                        consume_usedperday: $("#consume_usedperday").val(),
                        consume_text: $("#consume_text").val(),
                    },
                    success: function (rs) {
                        var errorCode = rs.errorCode;
                        if (errorCode == 0) {
                            //模态框成功后消失
                            $("#MyModalforAddandEdit").modal("hide");
                            //插入成功后刷新
                            initTable();
                            //刷新后出一个提示框
                            toastr.success(rs.status);
                        } else {
                            toastr.error(rs.status);
                            $("#MyModalforAddandEdit").modal("hide");
                        }
                    }
                })
            }
        });
        //delete
        $("#deleteMoreBtn").click(function () {
            //点击每一行的复选框都会将选中的行添加到数组中
            var rows = $("#data-table").bootstrapTable("getSelections");
            for(var i=0;i<rows.length;i++){
                consume_ids[i]=rows[i].consume_id;
            }
            alert("=========="+consume_ids[0]);
            $("#deleteDialogMsg").html("您确定要删除这"+rows.length+"间房间信息吗？");
            $("#myDeleteModal").modal("show");
        })

        $("#deleteBtn").click(function () {
            $.ajax({
                url:"/consumer/deleteConsume",
                datatype:"json",
                type:"post",
                data:{
                    consume_id:consume_ids
                },
                //序列化,能够传递数组给服务器
                traditional: true,
                success:function (result) {
                    var errorCode = result.errorCode;
                    if(errorCode==0){
                        $("#myDeleteModal").modal("hide");
                        initTable();
                        toastr.success(result.status);
                    }else if(errorCode==-1) {
                        $("#myDeleteModal").modal("hide");
                        toastr.error(result.status);
                    }
                }
            })
        })


        //添加客户
        $("#addBtn").click(function () {
            $("#consume_id").val("");
            showModalforAddandEdit();
        });
        //退出模态框下次点开编辑 上次模态框内容清除
        $("#MyModalforAddandEdit").on('hidden.bs.modal', function () {
            clearModelData();
        });
        //清空模态框
        function clearModelData() {
            $("#consume_id").val("");
            $("#consume_name").val("");
            $("#consume_price").val("");
            $("#consume_num").val("");
            $("#consume_unit").val("");
            $("#consume_usedperday").val("");
            $("#consume_text").val("");
        }
    });

    window.operateEvents = {
        'click .updateGuest': function (e, value, row, index) {
            $("#consume_id").val(row.consume_id);
            $.ajax({
                url: "/consumer/selectConsumeById",
                type: "post",
                dataType: "json",
                data: {
                    consume_id: row.consume_id
                },
                success: function (res) {
                    console.log(res);
                    if (res.errorCode == 0) {
                        showModalforAddandEdit();
                        $("#consume_id").val(res.object.consume_id);
                        $("#consume_name").val(res.object.consume_name);
                        $("#consume_price").val(res.object.consume_price);
                        $("#consume_num").val(res.object.consume_num);
                        $("#consume_unit").val(res.object.consume_unit);
                        $("#consume_usedperday").val(res.object.consume_usedperday);
                        $("#consume_text").val(res.object.consume_text);
                    }
                }
            });
        },

        //该点击事件需要将括号中的参数写全才可以显示出来
        'click .deleteGuest': function (e, value, row, index) {
            consume_id = row.consume_id;
            consume_ids[0] = row.consume_id;
            $("#deleteDialogMsg").html("确定要删除" + row.consume_id + "这条数据吗？");
            $("#myDeleteModal").modal("show");
        }
    };
    function showModalforAddandEdit() {
        var assets_id = $("#consume_id").val();
        if(assets_id!=""){
            $("#myModalLabelTitle").text("编辑资产");
            $("#addorEditBtn").text("编辑")
            $("#MyModalforAddandEdit").modal("show");
        }else{
            $("#myModalLabelTitle").text("添加资产");
            $("#addorEditBtn").text("添加")
            $("#MyModalforAddandEdit").modal("show");
        }
    }
</script>
</body>
</html>